<template>
    <el-form ref="formRef" :model="form" labelWidth="120px" label-suffix="：">
        <el-form-item label="测试参数">
            <monaco-editor style="width:100%; height:400px"
                           v-model="form.scriptContext"
                           ref="monacoEditor"
                           class="script-textarea"
                           @changeTextArea="changeTextArea"
                           language="json"
            ></monaco-editor>
        </el-form-item>
        <el-form-item label="运行方式">
            <el-radio-group v-model="form.runMode">
                <el-radio label="1">运行一次</el-radio>
                <el-radio label="2">单步调试</el-radio>
            </el-radio-group>
        </el-form-item>
    </el-form>
    <dialog-footer okText="开始运行" @ok="submitForm" @cancel="cancel"/>

</template>

<script setup>
import monacoEditor from './monaco-editor.vue'

import {defineComponent, ref, onMounted, reactive} from 'vue';
import {flowServiceStore} from '@data/store/flow';

const flowCount = flowServiceStore();
import {storeToRefs} from 'pinia';

const {logDisposition} = storeToRefs(flowCount);

defineComponent({
    name: 'log',
});
const props = defineProps({
})
const form = reactive({
    parameter: '',
    scriptContext: '',
    runMode: '1',
});


const emit = defineEmits(['cancel']);

onMounted(() => {
})

const changeTextArea = (value) => {
    form.parameter = value;
}


const submitForm = () => {
    flowCount.setLogDisposition(
        {
            graphJson:logDisposition.value.graphJson,
            parameter:form.parameter? JSON.parse(form.parameter):'',
            runMode: form.runMode,
        }
    )
    console.log(logDisposition.value);

    emit('toRun');

}
const cancel = () => {
    emit('cancel');
}
</script>

<style scoped lang="scss">
.script-textarea {
  padding: 0px;
  width: 100%; /* 内边距 */
  font-size: 24px !important;
  border-radius: 5px; /* 边框圆角 */
  .el-input__inner {
    border: 1px solid #dcdfe6; /* 边框颜色 */
    transition: all 0.3s ease; /* 过渡效果 */
    &:hover {
      border-color: #409eff; /* 鼠标悬浮时的边框颜色 */
    }
  }
}
</style>